import React,{Component}  from 'react';
import PropTypes from 'prop-types'
import { requireNativeComponent, View ,Dimensions} from 'react-native';

import geoLocation from './GeoLocation'

var iface = {
    name: 'MapView',
    propTypes: {
        ...View.propTypes,
        style: View.propTypes.style,
        //地图annotations:
        mapAnnotations: React.PropTypes.arrayOf(React.PropTypes.shape({
            sysNo: React.PropTypes.number,
            parentSysNo: React.PropTypes.number,
            areaCode: React.PropTypes.string,
            areaName: React.PropTypes.string,
            areaType: React.PropTypes.number,
            //地图坐标维度：
            locationY: React.PropTypes.number.isRequired,
            //地图坐标经度：
            locationX: React.PropTypes.number.isRequired,
            //总项目数目（省级，市级用）
            projectCount: React.PropTypes.number,
            //项目ID（项目层级用）
            projectCode: React.PropTypes.string,
            //项目名称（项目层级用）
            projectName: React.PropTypes.string,
            projectLevel: React.PropTypes.number
        })),
        mapUpdateStatus: React.PropTypes.shape({
            //地图坐标维度：
            locationY: React.PropTypes.number,
            //地图坐标经度：
            locationX: React.PropTypes.number,
            //缩放级别
            zoomLevel: React.PropTypes.number,
            //状态 active|inactive|background
            state: React.PropTypes.string
        }),
        toMyLocation: React.PropTypes.number
    }
};

const RCTBDMapView = requireNativeComponent('BDMap', iface, {
    nativeOnly: {onChange: true}
});
const RCTBDProjectNavMapView = requireNativeComponent('BDProjectNavMap', iface, {
    nativeOnly: {onChange: true}
});

export default class BDMapView extends Component {
    static propTypes = {
        style: PropTypes.any,
        mapAnnotations: PropTypes.array,
        mapUpdateStatus: PropTypes.object,
        nativeEventCallback: PropTypes.func,
        state: PropTypes.string
    };
    static defaultProps = {
        style: {
            flex: 1,
            width: Dimensions.get('window').width
        },
        mapAnnotations: [],
        mapUpdateStatus: {
            zoomLevel: 6
        },
        state: "active",
        nativeEventCallback: ()=> {
        }
    };

    get viewProps() {
        return {
            style: this.props.style,
            mapAnnotations: this.props.mapAnnotations,
            mapUpdateStatus: Object.assign({},this.props.mapUpdateStatus,{state:this.props.state})
        };
    }

    render() {
        return (
            <RCTBDMapView {...this.viewProps} onChange={this.props.nativeEventCallback.bind(this)}></RCTBDMapView>
        );
    }
}

export class BDProjectNavView extends Component {
    static propTypes = {
        style: PropTypes.any,
        mapAnnotations: PropTypes.array,
        mapUpdateStatus: PropTypes.object,
        toMyLocation: PropTypes.number,
        nativeEventCallback: PropTypes.func,
        state: PropTypes.string
    };
    static defaultProps = {
        style: {
            flex: 1,
            width: Dimensions.get('window').width
        },
        mapAnnotations: [],
        mapUpdateStatus: {
            zoomLevel: 14
        },
        toMyLocation: 0,
        state: "active",
        nativeEventCallback: ()=> {
        }
    };

    get viewProps() {
        return {
            style: this.props.style,
            mapAnnotations: this.props.mapAnnotations,
            mapUpdateStatus: Object.assign({},this.props.mapUpdateStatus,{state:this.props.state}),
            toMyLocation: this.props.toMyLocation
        };
    }

    render() {
        return (
            <RCTBDProjectNavMapView {...this.viewProps}
                onChange={this.props.nativeEventCallback.bind(this)}></RCTBDProjectNavMapView>
        );
    }
}

export const IbuildLocation = geoLocation;